<template>
  <s-layout>
    <view class="container">

      <view class="form-container">
        <!-- 头部标题 -->
        <view class="header-box">
          <text
            class="cicon-edit"
            style="color: #0052d9; font-size: 44rpx; margin-right: 20rpx"
          ></text>
          <text class="title">完善企业信息</text>
        </view>

        <!-- 基本信息区块 -->
        <view class="form-card">
          <fui-section
            title="基本信息"
            line-width="3px"
            line-color="#0052d9"
            isLine
            size="34"
            style="
              padding: 0;
              margin-bottom: 10rpx; /* Adjusted margin */
            "
          ></fui-section>

          <!-- 企业商标 -->
          <view class="form-item avatar-like-item" @click="chooseAvatar">
            <view class="item-left">
               <text
                class="cicon-moneybag"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530;">企业商标：</text>
            </view>
            <view class="avatar-right">
              <image
                v-if="displayLogoUrl"
                class="avatar"
                :src="displayLogoUrl"
                mode="aspectFill"
              ></image>
              <text v-else class="placeholder-text">请上传</text>
               <!-- Arrow Icon like reference -->
              <image class="arrow-icon" src="@/static/tabs/更多.png" mode="scaleToFill" />
            </view>
          </view>

          <!-- 企业全称 (不可编辑) -->
          <fui-input
            label="企业全称"
            placeholder="请输入企业全称"
            v-model="formData.c_name"
            :padding="['26rpx', '0rpx']"
          >
             <text
                class="cicon-company"
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
          </fui-input>

          <!-- 机构代码 (不可编辑) -->
          <fui-input
            label="机构代码"
            placeholder="请输入机构代码"
            v-model="formData.c_license_num"
            :padding="['26rpx', '0rpx']"
          >
             <text
                class="cicon-barcode" 
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
           </fui-input>

           <!-- 注册地址 (不可编辑) -->
           <fui-input
             label="注册地址"
             placeholder="注册地址不可修改"
             v-model="formData.c_reg_adress"
             :padding="['26rpx', '0rpx']"
           >
             <text
                class="cicon-location" 
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
           </fui-input>

           <!-- 注册时间 -->
           <fui-input
             @click="showTimePicker = true"
             label="注册时间"
             placeholder="请选择注册时间"
             v-model="formData.c_reg_time"
             :padding="['26rpx', '0rpx']"
           >
             <text
                class="cicon-time" 
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
             <fui-date-picker
               :show="showTimePicker"
               type="3"
               @change="confirmTime"
               @cancel="showTimePicker = false"
             >
             </fui-date-picker>
           </fui-input>

           

           <!-- 公司法人 -->
          <fui-input
            label="公司法人"
            placeholder="请输入公司法人"
            v-model="formData.c_legal"
            :padding="['26rpx', '0rpx']"
            :borderBottom="true"
          >
            <text
                class="cicon-person"
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
          </fui-input>

          <!-- 企业电话 -->
          <fui-input
            label="企业电话"
            placeholder="请输入企业电话"
            v-model="formData.c_tel"
            :padding="['26rpx', '0rpx']"
            :borderBottom="true"
          >
             <text
                class="cicon-phone"
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
           </fui-input>

           <!-- 状态 (不可编辑) -->
           <fui-input
             label="状态"
             placeholder="状态不可修改"
             :value="formData.c_is_operate==0?'正常':'异常'"
             disabled
             :padding="['26rpx', '0rpx']"
             style="--fui-input-label-color: #4f4e4e; --fui-input-color: #999;"
           >
             
           </fui-input>
        </view>

        <!-- 经营信息区块 -->
        <view class="form-card">
          <fui-section
            title="经营信息"
            line-width="3px"
            line-color="#0052d9"
            isLine
            size="34"
            style="
              padding: 0;
              --fui-section-title-color: #1a1a1a;
              margin-bottom: 10rpx; /* Adjusted margin */
            "
          ></fui-section>

          <!-- 所属行业 -->
          <view class="form-item picker-item" @click="openSelectCategoryF">
             <view class="item-left">
               <text
                class="cicon-input"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530;">所属行业:</text>
            </view>
            <view class="picker-right">
              <!-- 显示 Label，提交 Value (假设 options 是 {label, value}) -->
              <text v-if="formData.category_name_c" class="picker-value">{{ formData.hangye?formData.hangye: formData.category_name_f+'/'+formData.category_name_c}}</text>
              <!-- 或者如果 category_id_f 直接存的是 Label -->
              <!-- <text v-if="formData.category_id_f" class="picker-value">{{ formData.category_id_f }}</text> -->
              <text v-else class="placeholder-text">请选择所属行业</text>
               <image class="arrow-icon" src="@/static/tabs/更多.png" mode="scaleToFill" />
            </view>
            <fui-picker
              :show="showCategoryF"
              :options="categoryFOptions" 
              :value="[formData.category_id_f, formData.category_id_c]"
              :layer="2" 
              @change="confirmCategoryF"
              @cancel="closeSelectCategoryF"
              btnSize="28"
              linkage 
            ></fui-picker>
          </view>

          <!-- 企业规模 -->
          <view class="form-item picker-item" @click="openSelectCompanyScale">
             <view class="item-left">
              <text
                class="cicon-loop"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530;">企业规模:</text>
            </view>
            <view class="picker-right">
               <text v-if="formData.c_company_scale" class="picker-value">{{ companyScaleOptions.find(opt => opt.value == formData.c_company_scale)?.text || formData.c_company_scale }}</text>
              <text v-else class="placeholder-text">请选择企业规模</text>
               <image class="arrow-icon" src="@/static/tabs/更多.png" mode="scaleToFill" />
            </view>
            <fui-picker
              :show="showCompanyScale"
              :options="companyScaleOptions"
              @change="confirmCompanyScale"
              @cancel="closeSelectCompanyScale"
              :layer="1"
              linkage 
            ></fui-picker>
          </view>

          <!-- 经营类型 -->
          <view class="form-item picker-item" @click="openSelectEconomicType">
             <view class="item-left">
              <text
                class="cicon-tag"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530;">经营类型:</text>
            </view>
            <view class="picker-right">
               <text v-if="formData.c_economic_type" class="picker-value">{{ economicTypeOptions.find(opt => opt.value == formData.c_economic_type)?.text || formData.c_economic_type }}</text>
               <text v-else class="placeholder-text">请选择经营类型</text>
               <image class="arrow-icon" src="@/static/tabs/更多.png" mode="scaleToFill" />
            </view>
            <fui-picker
              :show="showEconomicType"
              :options="economicTypeOptions"
               :value="formData.c_economic_type"
              @change="confirmEconomicType"
              @cancel="closeSelectEconomicType"
              :layer="1"
              linkage 
            ></fui-picker>
          </view>

          <!-- 经营内容 -->
          <fui-input
            label="经营内容"
            placeholder="请输入经营内容"
            v-model="formData.c_operate"
             :padding="['26rpx', '0rpx']"
            :borderBottom="true"
          >
             <text
                class="cicon-list"
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
          </fui-input>

          <!-- 经营地址 -->
          <fui-input
            label="经营地址"
            placeholder="请输入详细地址"
            v-model="formData.c_address"
            :padding="['26rpx', '0rpx']"
            :borderBottom="false"
          >
             <text
                class="cicon-location" 
                slot="prefix"
                style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx;"
             ></text>
           </fui-input>
        </view>



        <!-- 提交按钮 -->
        <view class="submit-btn-container">
            <view class="submit-btn" @click="submit">
            <text class="btn-text">提交修改</text>
            </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import sheep from "@/sheep";

// Default logo placeholder path - adjust if needed
const DEFAULT_LOGO_PATH = '/static/img/default_logo.png'; // Create this image or use another placeholder

// --- State ---
const formData = ref<Record<string, any>>({
  company_id: sheep.$store("user").userInfo.company_id,
  c_name: "", // 企业名称(不可编辑)
  c_license_num: "", // 机构代码(不可编辑)
  c_image: "", // 企业商标
  c_legal: "", // 公司法人
  c_reg_adress: "", // 注册地址
  c_reg_time: "", // 注册时间
  c_economic_type: 0, // 经营类型
  category_id_f: "", // 所属行业
  category_id_c: "", // 企业规模
  c_operate: "", // 经营内容
  c_company_scale: "", // 企业规模
  c_area_num: "", // 归属区域(不可编辑)
  c_tel: "", // 企业电话
  c_is_operate: "", // 状态(不可编辑)
  c_address: "", // 经营地址
});

// Holds the URL to display (can be existing URL or temporary local path)
const displayLogoUrl = ref('');
// Holds the *new* logo path returned from the server after upload
const newLogoServerPath = ref<string | null>(null);
// Date picker visibility
const showTimePicker = ref(false);


const showCategoryF = ref(false);
const showCompanyScale = ref(false);
const showEconomicType = ref(false);

// 选择器选项
const categoryFOptions = ref([]); // 所属行业选项
const companyScaleOptions = ref([]); // 企业规模选项
const economicTypeOptions = ref([]); // 经营类型选项

// --- Lifecycle Hooks ---
onLoad(async (options) => {
  if (options?.id) {
    await loadPickerOptions();
    await qyDetail(options.id);
  } else {
    console.error("缺少企业ID");
    uni.showToast({ title: '无法加载企业信息', icon: 'none' });
  }
});

// 确认时间选择
const confirmTime = (e: any) => {
  formData.value.c_reg_time = e.result;
  showTimePicker.value = false;
};

// --- Methods ---

// Fetch Company Details
const qyDetail = async (id: string | number) => {
  uni.showLoading({ title: '加载中...' });
  console.log('[update.vue] qyDetail - company_id:', id);

  if (!id) {
    console.error('[update.vue] qyDetail - Error: company_id is missing.');
    uni.showToast({ title: '企业ID缺失', icon: 'none' });
    uni.hideLoading();
    return;
  }

  try {
    const params = { company_id: id };
    console.log('[update.vue] qyDetail - API params:', JSON.stringify(params));
    const res = await sheep.$api.qy_index.info(params); // Assuming sheep and $api are correctly set up
    console.log('[update.vue] qyDetail - API response:', JSON.stringify(res));

    if (res && res.code === 200) {
      // Determine where the actual company data is
      let companyData = null;
      if (res.companyInfo && typeof res.companyInfo === 'object') {
        console.log('[update.vue] qyDetail - Using res.companyInfo:', JSON.stringify(res.companyInfo));
        companyData = res.companyInfo;
      } else if (res.data && typeof res.data === 'object') {
        console.log('[update.vue] qyDetail - res.companyInfo not found or not an object, trying res.data:', JSON.stringify(res.data));
        companyData = res.data;
      } else {
        console.error('[update.vue] qyDetail - Error: Company data not found in expected location (res.companyInfo or res.data). Full response:', JSON.stringify(res));
        uni.showToast({ title: '返回数据格式错误', icon: 'none' });
        uni.hideLoading(); // Ensure loading is hidden on early exit
        return;
      }

      // Assign data if found
      if (companyData) {
        Object.assign(formData.value, companyData);
        displayLogoUrl.value = companyData.c_image || DEFAULT_LOGO_PATH;
        formData.value.c_image = companyData.c_image || ''; // Ensure formData is also updated
        console.log('[update.vue] qyDetail - formData populated:', JSON.parse(JSON.stringify(formData.value)));
      }

    } else {
      const errorMsg = res && res.msg ? res.msg : '加载企业信息失败';
      const errorCode = res ? res.code : 'N/A';
      console.error(`[update.vue] qyDetail - API error: ${errorMsg}. Code: ${errorCode}. Full response:`, JSON.stringify(res));
      uni.showToast({ title: errorMsg, icon: 'none' });
    }
  } catch (error: any) {
    console.error("[update.vue] qyDetail - Exception:", error.message || error, error.stack || '');
    uni.showToast({ title: '加载数据异常', icon: 'none' });
  } finally {
    uni.hideLoading();
  }
};


// Choose and Upload Logo (Adapted from reference)
const chooseAvatar = async () => {
  try {
    const chooseRes = await uni.chooseImage({
      count: 1,
      sizeType: ["compressed"],
      sourceType: ["album", "camera"], // Allow camera
    });

    const tempFilePath = chooseRes.tempFilePaths[0];
    displayLogoUrl.value = tempFilePath; // Show preview immediately
    newLogoServerPath.value = null; // Reset server path until upload succeeds

    uni.showLoading({ title: "上传商标中..." });

    const upLoadrUrl = sheep.$store("app").template.basic.config.url+"/app_api.php?t=upload&op=image_upload&role=company&type=companyInfo"; // Placeholder URL from reference

    const token = sheep.$store('user').getToken ? sheep.$store('user').getToken() : null;
    const headers: Record<string, any> = {};
    if (token) {
      // Adjust header name if needed (e.g., 'X-Token', 'Authorization': 'Bearer ' + token)
      headers['Authorization'] = 'Bearer ' + token;
    }

    uni.uploadFile({
      url: upLoadrUrl,
      filePath: tempFilePath,
      name: 'file', // The name expected by your backend API for the file field
      header: headers,
      success: (uploadFileRes) => {
        console.log("Upload success raw response:", uploadFileRes);
        try {
          // Remove BOM if present before parsing
          const responseData = JSON.parse(uploadFileRes.data.replace(/^\uFEFF/, '') || "{}");
          console.log("Parsed server response:", responseData);

          if (responseData.data) { // Assuming 'data' contains the relative path
            const relativePath = responseData.data;
            const serverUrl = relativePath; // Construct full URL

            console.log("上传成功，服务器URL:", serverUrl);
            newLogoServerPath.value = serverUrl; // Store the *new* server URL

            uni.hideLoading();
            uni.showToast({ title: "商标上传成功", icon: "success", duration: 1500 });

          } else {
            const errorMessage = responseData.msg || responseData.message || "商标上传失败";
            console.error("商标上传失败 (API Error):", errorMessage, responseData);
            uni.hideLoading();
            uni.showToast({ title: errorMessage, icon: "none" });
            // Revert display URL to the original one on failure
            displayLogoUrl.value = formData.value.c_image || DEFAULT_LOGO_PATH;
            newLogoServerPath.value = null;
          }
        } catch (parseError) {
          console.error("解析服务器响应失败:", parseError, uploadFileRes.data);
          uni.hideLoading();
          uni.showToast({ title: "处理服务器响应失败", icon: "none" });
          displayLogoUrl.value = formData.value.c_image || DEFAULT_LOGO_PATH;
          newLogoServerPath.value = null;
        }
      },
      fail: (err) => {
        console.error("商标上传失败 (uni.uploadFile):", err);
        uni.hideLoading();
        uni.showToast({ title: "商标上传网络错误", icon: "none" });
        displayLogoUrl.value = formData.value.c_image || DEFAULT_LOGO_PATH;
        newLogoServerPath.value = null;
      },
    });

  } catch (chooseError: any) {
    // Handle cancellation gracefully
    if (chooseError.errMsg && chooseError.errMsg.includes('cancel')) {
      console.log('用户取消选择商标');
    } else {
      console.error("选择商标时发生错误:", chooseError);
      uni.showToast({ title: "选择图片失败", icon: "none" });
    }
    uni.hideLoading(); // Ensure loading is hidden if chooseImage fails
  }
};


// Category Picker Methods
const openSelectCategoryF = () => { showCategoryF.value = true; };
const closeSelectCategoryF = () => { showCategoryF.value = false; };
const confirmCategoryF = (e) => {
  formData.value.hangye= e.text[0]+'/'+e.text[1]
  formData.value.category_id_f=e.value[0]
  formData.value.category_id_c=e.value[1]
  closeSelectCategoryF();
};

const openSelectCompanyScale = () => { showCompanyScale.value = true; };
const closeSelectCompanyScale = () => { showCompanyScale.value = false; };
const confirmCompanyScale = (e: { value: string }) => {
console.log("选择企业规模:", e.value);
  formData.value.c_company_scale = e.value;
  closeSelectCompanyScale();
};

const openSelectEconomicType = () => { showEconomicType.value = true; };
const closeSelectEconomicType = () => { showEconomicType.value = false; };
const confirmEconomicType = (e: { value: string }) => {
  formData.value.c_economic_type = e.value;
  closeSelectEconomicType();
};

// 加载选择器选项
const loadPickerOptions = async () => {
  try {
    const res = await sheep.$api.qy_index.detailedit();
    if (res.code === 200) {
      categoryFOptions.value = res.categoryList || [];
      companyScaleOptions.value = res.company_scale || [];
      economicTypeOptions.value = res.economic_type || [];
    }
  } catch (error) {
    console.error('加载选择器选项失败:', error);
    uni.showToast({ title: '加载选项失败', icon: 'none' });
  }
};

// --- Form Submission ---
const submit = async () => {
  console.log("提交表单:", formData.value);
  // 验证必填字段
  if (!formData.value.c_legal?.trim()) {
    return uni.showToast({ title: "请输入公司法人", icon: "none" });
  }
  if (!formData.value.c_tel?.trim()) {
    return uni.showToast({ title: "请输入企业电话", icon: "none" });
  }
  if (!formData.value.c_operate?.trim()) {
    return uni.showToast({ title: "请输入经营内容", icon: "none" });
  }
  if (!formData.value.c_address?.trim()) {
    return uni.showToast({ title: "请输入经营地址", icon: "none" });
  }
  if (!formData.value.category_id_f) {
    return uni.showToast({ title: "请选择所属行业", icon: "none" });
  }
  if (!formData.value.c_company_scale) {
    return uni.showToast({ title: "请选择企业规模", icon: "none" });
  }
  if (!formData.value.c_economic_type) {
    return uni.showToast({ title: "请选择经营类型", icon: "none" });
  }

  // 电话格式验证
  const phoneRegex = /^\d{7,12}$/;
  if (!phoneRegex.test(formData.value.c_tel)) {
    return uni.showToast({ title: "请输入有效的企业电话", icon: "none" });
  }

  uni.showLoading({ title: "正在提交...", mask: true });

  try {
    // 构建提交数据
    const payload: Record<string, any> = {
      
    };

    // 如果有新的商标图片，添加到提交数据中
    if (newLogoServerPath.value) {
      formData.value.c_image = newLogoServerPath.value.replace(/^https?:\/\/[^\/]+/, "");
    } else if (formData.value.c_image) {
      payload.c_image = formData.value.c_image.replace(/^https?:\/\/[^\/]+/, "");
    }

    const response = await sheep.$api.qy_index.update(formData.value);
    uni.hideLoading();

    if (response.code === 200) {
      uni.showToast({
        title: response.msg || "修改成功",
        icon: "success",
        duration: 1500,
      });

      if (newLogoServerPath.value) {
        formData.value.c_image = newLogoServerPath.value;
      }

      // 发送数据更新事件，通知其他页面刷新数据
      uni.$emit('companyDataUpdated', {
        timestamp: Date.now(),
        action: 'update',
        moduleType: 'company'
      });

      setTimeout(() => {
        uni.reLaunch({ url: '/pages/qy/detail' });
      }, 1000);
    } else {
      uni.showToast({
        title: response.msg || "提交失败，请重试",
        icon: "none",
        duration: 2000,
      });
    }
  } catch (error) {
    uni.hideLoading();
    console.error("提交错误:", error);
    uni.showToast({
      title: "网络错误或服务异常",
      icon: "none",
      duration: 2000,
    });
  }
};
</script>

<style lang="scss" scoped>
/* Import icon fonts if not globally available */
/* @import "/src/sheep/scss/icon/_cicon.scss"; */ /* Example path */

.container {
  padding: 20rpx 30rpx 120rpx 30rpx; /* Keep bottom padding for fixed button */
  background: #f8f9fa;
  min-height: 100vh; /* Ensure background covers full height */
  box-sizing: border-box;
}

.header-box {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  .title {
    font-size: 40rpx;
    font-weight: 700;
    color: #1a1a1a;
  }
}

/* General Form Card Style */
.form-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 20rpx 0 20rpx; /* Adjust padding */
  font-size: 32rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.05); /* Softer shadow */

  // Consistent styling for fui-input within cards
  ::v-deep .fui-input__wrap {
     padding-left: 0 !important;
     padding-right: 0 !important;
     // align-items: center; /* Vertically center label and input */
  }
   ::v-deep .fui-input__label {
     color: #4f4e4e !important;
     font-weight: 530 !important;
     width: 180rpx !important; /* Fixed width for labels */
     margin-right: 0 !important; /* Remove default margin */
     flex-shrink: 0; /* Prevent label from shrinking */
   }
  ::v-deep .fui-input__padding {
    padding: 26rpx 0 !important; // Consistent internal padding
  }
  ::v-deep .fui-input__input {
      text-align: left; // Align input text to the right
      color: #1a1a1a;
      font-weight: normal;
  }
  // Style placeholder text if needed
   ::v-deep .fui-input__placeholder, ::v-deep .fui-input__input[placeholder-style] {
     text-align: left !important;
     color: #999 !important;
     font-weight: normal;
   }
    // Ensure borders are consistent or controlled by props
   ::v-deep .fui-input__border-bottom::after, ::v-deep .fui-input__border-top::after {
      left: 0 !important; // Make border full width
      right: 0 !important;
   }
}


/* Specific Item Styles */
.form-item {
  display: flex;
  justify-content: space-between; // Push content to ends
  align-items: center;
  padding: 26rpx 0; // Match fui-input padding
  font-size: 32rpx;
  border-bottom: 1rpx solid #eee;
}

/* Style for Logo item to resemble reference avatar item */
.avatar-like-item {
  border-bottom: 1rpx solid #eee; // Add border like other items

  .item-left {
    display: flex;
    align-items: center;
  }

  .avatar-right {
    display: flex;
    align-items: center;
  }
  .avatar {
    width: 80rpx; // Slightly larger logo
    height: 80rpx;
    border-radius: 8rpx; // Square or slightly rounded for logos
    border: 1px solid #eee;
    margin-right: 15rpx;
    background-color: #f0f0f0; // Placeholder background
  }
  .arrow-icon {
    width: 25rpx;
    height: 25rpx;
    opacity: 0.6;
  }
  .placeholder-text {
     color: #999;
     font-size: 30rpx;
     margin-right: 15rpx; // Space before arrow
  }
}

/* Style for Picker items */
.picker-item {
   border-bottom: 1rpx solid #eee;

  .item-left {
     display: flex;
     align-items: center;
     color: #4f4e4e;
     font-weight: 530;
   }
   .picker-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-grow: 1; // Take remaining space
      text-align: left; 
      margin-left: 20rpx; // Space between label and value
   }
   .picker-value {
      color: #1a1a1a;
      margin-right: 15rpx;
      // Ellipsis for long text if needed
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
   }
   .placeholder-text {
      color: #999;
      font-size: 30rpx;
      margin-right: 15rpx;
   }
    .arrow-icon {
      width: 25rpx;
      height: 25rpx;
      opacity: 0.6;
      flex-shrink: 0; // Prevent arrow from shrinking
    }

    // Hide the fui-input within the picker item visually
    // (It's just used to trigger the picker via v-model linkage in original code,
    // but we trigger via container click now, so it's not needed)
    // If you were using fui-input *for display* you'd style it here.
}

/* Submit Button Styling (Fixed at bottom) - Copied from reference */
.submit-btn-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
    background-color: #f8f9fa; // Match page background
    z-index: 10;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  background: linear-gradient(135deg, #0052d9, #2979ff);
  border-radius: 50rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(0, 82, 217, 0.3);
  transition: background 0.3s ease;

  &:active {
    background: linear-gradient(135deg, darken(#0052d9, 5%), darken(#2979ff, 5%));
  }

  .btn-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }
}
</style>